<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat Room</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.0/socket.io.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f4f4f4; /* 浅灰色背景 */
        }
        h1 {
            color: #333;
            text-align: center;
        }
        #messages {
            height: 300px;
            overflow-y: scroll;
            border: 1px solid #ccc;
            background-color: #fff; /* 白色背景 */
            padding: 10px;
            margin-bottom: 10px;
            margin-top: 20px;
        }
        #messageInput {
            padding: 10px;
            font-size: 16px;
            width: calc(100% - 22px); /* 减去padding和border的假设宽度 */
            margin-right: 10px; /* 为按钮留出空间 */
        }
        button {
            background-color: #007BFF; /* 蓝色背景 */
            color: white;
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3; /* 鼠标悬停时颜色变深 */
        }
    </style>
</head>
<body>
    <h1>Chat Room</h1>
    <div id="messages"></div>
    <input type="text" id="messageInput" placeholder="Enter message...">
    <button onclick="sendMessage()">Send</button>

    <script>
        // 之前的JavaScript代码保持不变
        var socket = io.connect('http://' + document.domain + ':' + location.port);

        socket.on('connect', function() {
            console.log('Connected to the server!');
        });

        socket.on('response', function(msg) {
            displayMessage(msg);
        });

        function displayMessage(msg) {
            var messagesDiv = document.getElementById('messages');
            var messageElement = document.createElement('p');
            messageElement.textContent = msg;
            messagesDiv.appendChild(messageElement);
            messagesDiv.scrollTop = messagesDiv.scrollHeight;
        }

        function sendMessage() {
            var input = document.getElementById('messageInput');
            var msg = input.value.trim();
            if (msg) {
                socket.emit('message', msg);
                displayMessage(msg);
                input.value = '';
            }
        }
    </script>
</body>
</html>